import 'package:flutter/material.dart';
import 'package:flutter_flux/flutter_flux.dart';
import 'package:freemusic/components/GedanDialog.dart';
import 'package:freemusic/model/AbstractSong.dart';
import 'package:freemusic/model/Gedan.dart';
import 'package:freemusic/services/GedanServices.dart';
import 'package:freemusic/stores/GedanStores.dart';
import 'package:freemusic/utils/Util.dart';

class SongSheetListPage extends StatefulWidget {

  final AbstractSong waitAddSong;

  const SongSheetListPage({Key key, @required this.waitAddSong}) : super(key: key);
  

  @override
  State<StatefulWidget> createState() {
    return SongSheetListState();
  }
}

class SongSheetListState extends State<SongSheetListPage>
    with StoreWatcherMixin<SongSheetListPage> {
  GedanStore _gedanStore;
  GedanServices _gedanServices = GedanServices.getInstace();

  @override
  void initState() {
    super.initState();
    _gedanStore = listenToStore(gedanToken);
  }

  void _handleSongItemOnTap(Gedan gedan){
    _gedanServices.addSongToGedan(gedan, widget.waitAddSong ).then((v){
      if(v){
        Navigator.of(context).pop(1);
      }
    });
  }

  Widget _renderListView() {
    List<Widget> list = List();
    list.add(_renderAddGedan());
    // list.add(_renderFavorite());
    List<Gedan> gedanList = _gedanStore.gedanList;
    int listLength = list.length;
    int gedaListLength = gedanList.length;

    return ListView.builder(
      itemBuilder: (context, index) {
        if (index < 1) {
          return list[index];
        }
        Gedan item = gedanList[index - listLength];
        String picture = item.picture;
        if(item.picture == null || item.picture.isEmpty){
          picture = "https://picsum.photos/50/50";
        }

        return SongSheetItem(
          image: FadeInImage.assetNetwork(
            placeholder: "images/play.png",
            image: picture,
          ),
          content: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(item.gdName),
              Text("${item.count} 首"),
            ],
          ),
          onTap: (){
            this._handleSongItemOnTap(item);
          },
        );
      },
      itemCount: listLength + gedaListLength,
    );
  }

  Widget _renderAddGedan() {
    Color iconColor = Util.themeColor;

    return SongSheetItem(
        image: Icon(
          Icons.add,
          color: iconColor,
          size: 36,
        ),
        content: Text(
          "新建歌单",
          style: TextStyle(fontSize: 16),
        ),
        onTap: () {
          showDialog(
              context: context,
              builder: (ctx) {
                return GedanDialog();
              });
        });
  }

  Widget _renderFavorite() {
    Color iconColor = Util.themeColor;

    return SongSheetItem(
      image: Icon(
        Icons.favorite,
        color: iconColor,
        size: 30,
      ),
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text("我喜欢"),
          Text("22 首"),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    Color themeColor = Util.themeColor;
    Color wordColor = Colors.black;
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "将此歌曲添加到",
          style: TextStyle(color: wordColor),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
        iconTheme: IconThemeData(color: themeColor),
      ),
      body: Container(
        child: this._renderListView(),
      ),
    );
  }
}

class SongSheetItem extends StatelessWidget {
  final Widget image;
  final Widget content;
  final Function onTap;
  

  SongSheetItem({this.image, this.content, this.onTap});

  @override
  Widget build(BuildContext context) {
    Widget image = this.image;
    Color backgroundColor = Util.backgroundColor;
    double size = 48;

    return InkWell(
      onTap: this.onTap,
      child: Container(
        padding: EdgeInsets.only(left: 10, right: 10, top: 4, bottom: 4),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: backgroundColor, width: 0.6),
          ),
        ),
        child: Row(
          children: <Widget>[
            Container(
              height: size,
              width: size,
              margin: EdgeInsets.only(right: 10),
              decoration: BoxDecoration(
                color: backgroundColor,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0),
                child: image,
              ),
            ),
            Container(
              child: content,
            ),
          ],
        ),
      ),
    );
  }
}
